<template>
  <!-- 标题 -->
  <h2 :style="{ color: titleInfo?.color }">{{ titleInfo?.value }}</h2>
  <div class>count:{{ $store.state.count }}</div>
  <div>doubleCount:{{ doubleCount }}</div>
  <!-- 新增代办事项 -->
  <input
    type="text"
    v-model="todoName"
    @keydown.enter="addTodo(newTodo(todoName))"
  />
  <!-- 代办事项列表 -->
  <div v-for="item in items" :key="item.id">{{ item.name }}</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
import type { Todo, TitleInfo } from "../../../types";

// interface TitleInfo {
//     value:string,
//     color:string
// }

export default defineComponent({
  name: "Comp",
  props: {
    titleInfo: {
      type: Object as PropType<TitleInfo>,
      require: true
    },
  },
  data() {
    return {
      items: [] as Todo[],
      todoName: "", //新增todo名称
    };
  },
  created() {
    this.items.push({
      id: 2,
      name: "vue",
      completed: false,
    });
  },
  computed: {
    doubleCount(): number {
      return this.$store.state.count * 2;
    },
  },
  methods: {
    newTodo(todoName: string): Todo {
      return {
        id: this.items.length + 1,
        name: todoName,
        completed: false,
      };
    },
    addTodo(todo: Todo): void {
      this.items.push(todo);
      this.todoName = "";
    },
  },
});
</script>
<style></style>